class Tab{
	constructor(sel,index=0) {
		//属性
	    this.index=index;
		this.el=document.querySelector(sel);
		this.ul=this.el.querySelector("#navUL");
		this.lis=this.ul.querySelectorAll("li");
		
		this.boxs=this.el.querySelectorAll(".box");
		//调用
		this.btnEvent()
	}
	
	//方法
	btnEvent(){
		let that=this;
		for (let i = 0; i < this.lis.length; i++) {
			this.lis[i].onclick=function(){
				that.selectedBoxIndex(i);
				that.selectedBtnIndex(i);
			}
		}
		this.selectedBtnIndex(this.index);
		this.selectedBoxIndex(this.index);
	}
	
	selectedBoxIndex(index){
		for (let j = 0; j < this.boxs.length; j++) {
			this.boxs[j].style.display="none";
		}
		this.boxs[index].style.display="block";
	}
	
	selectedBtnIndex(index){
		for (let j = 0; j < this.lis.length; j++) {
			this.lis[j].classList=""
		}
		this.lis[index].classList="active";	
	}	
}